page {
  background-color: #f4f4f4;
}

.avatar {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 360rpx;
  z-index: -1;
}

.body {
  min-height: 100vh;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #f4f4f4;
  z-index: 100;
  margin-top: 330rpx;

  & > view {
    transform: translateY(-80rpx);
  }

  .box {
    .title {
      .name {
        font-size: 32rpx;
        font-weight: 600;
      }
      .fee {
        align-items: flex-end;
        .price {
          color: #ff8725;
          font-size: 42rpx;
          font-weight: 600;
          line-height: 1em;
        }
        .unit {
          font-size: 24rpx;
          color: #808080;
          margin-left: 0.25em;
        }
      }
    }

    .sub-title {
      margin-top: 12rpx;
      font-size: 24rpx;
      color: #666666;
    }

    .content {
      font-size: 26rpx;
      line-height: 1.6em;
      margin-top: 12rpx;
      padding-top: 12rpx;
      border-top: 2px dashed #eeeeee;

      .label {
        width: 5em;
      }
    }

    .area {
      margin: 0 -24rpx;
      margin-top: 16rpx;
      gap: 6rpx;

      .infos {
        padding: 16rpx;
        flex: 1;
        border-radius: 12rpx;
        position: relative;
        overflow: hidden;
        padding-bottom: 36rpx;
        color: #333333;

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background-color: var(--temp-color);
          opacity: 0.15;
          z-index: -1;
        }

        &:nth-child(1) {
          --temp-color: #23CBA8;
        }

        &:nth-child(2) {
          --temp-color: #FF922D;
        }

        &:nth-child(3) {
          --temp-color: #25A3FF;
        }

        .label {
          font-size: 20rpx;
          position: relative;
          line-height: 1em;
          margin-bottom: 12rpx;

          &::before {
            content: "";
            position: absolute;
            left: -16rpx;
            width: 8rpx;
            height: 20rpx;
            background-color: var(--temp-color);
          }
        }

        .detail {
          font-size: 24rpx;
          font-weight: 500;
        }

        .icon {
          position: absolute;
          right: 0;
          bottom: -16rpx;
          font-size: 84rpx;
          color: var(--temp-color);
          opacity: 0.4;
          mask-image: linear-gradient(135deg, #000000, 20%, #00000000);
          -webkit-mask-image: linear-gradient(135deg, #000000, 20%, #00000000);
        }
      }
    }

    &.content {
      .content-title {
        font-size: 26rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
      }

      .detail {
        font-size: 24rpx;
        line-height: 1.5em;
        padding: 24rpx 16rpx;
        border-radius: 16rpx;
        border: 1px solid #25A3FF80;
      }
    }

    &.rights {
      margin: 24rpx 0;
      .rights-title {
        margin-bottom: 18rpx;
        .name {
          font-size: 30rpx;
          font-weight: 900;
          font-style: italic;

          .warn {
            color: var(--main-color);
          }
        }
        .desc {
          margin-left: 12rpx;
          font-size: 18rpx;
          color: #808080;
        }
      }

      .line {
        .item {
          padding: 24rpx 16rpx;
          width: 90rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 18rpx;
          border: 1px solid #dddddd;
          border-radius: 6rpx;

          .icon {
            width: 60rpx;
            height: 60rpx;
            font-size: 45rpx;
            line-height: 1em;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 60rpx;
            background: linear-gradient(to bottom, #D9D9D9, #C0C0C0);
          }

          .desc {
            font-size: 20rpx;
            color: #666666;
          }

          &.active {
            border: 1px solid #25A3FF80;
            background: linear-gradient(to bottom, #25A3FF05, #25A3FF15);
            .icon {
              background: linear-gradient(to bottom, #25A3FF80, #25A3FF);
            }
          }
        }
      }
    }
  }
}

.bottom {
  position: fixed;
  z-index: 1000;
  left: 45rpx;
  bottom: 45rpx;
  right: 45rpx;

  .btn {
    padding: 18rpx;
    background-color: var(--main-color);
    color: white;
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    border-radius: 12rpx;
  }
}

.company {
  margin-top: 12rpx;
  &-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 24rpx;
  }

  &-info {
    height: 100rpx;
    margin-left: 24rpx;
    .name {
      font-size: 28rpx;
    }
    .desc {
      margin-top: 12rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #808080;

      &:last-child {
        margin-top: 6rpx;
      }
    }
  }
  .arrow {
    margin-left: auto;
  }
}

.popup {
  padding: 24rpx 0;

  .title {
    font-size: 36rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24rpx;
  }
}